<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/supersized.css' %}">

</head>
<body>
<div class="page-container">
    <h1>Login</h1>
    <form action="" method="post">
        {% csrf_token %}
        <div>
            <input type="text" name="username" class="username" placeholder="Username" autocomplete="off">
        </div>
        <div>
            <input type="password" name="password" class="password" placeholder="Password" oncontextmenu="return false"
                   onpaste="return false">
        </div>
        <div>{{ error }} </div>

        <button id="submit">Sign in</button>
    </form>
    <div class="connect">
        <p>If we can only encounter each other rather than stay with each other,then I wish we had
            never encountered.</p>
        <p style="margin-top: 20px; ">如果只是遇见，不能停留，不如不遇见。</p>
    </div>
</div>
<div class="alert" style="display:none">
    <h2>消息</h2>
    <div class="alert_con">
        <p id="ts"></p>
        <p style="line-height:70px"><a class="btn">确定</a></p>
    </div>
</div>

<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/supersized.3.2.7.min.js' %}"></script>
<script src="{% static 'js/supersized-init.js' %}"></script>
<script>
    {#$(".btn").click(function () {#}
    {#    is_hide();#}
    {# }) #}
    {##}
    window.onload = function () {
        $(".connect p").eq(0).animate({"left": "0%"}, 600);
        $(".connect p").eq(1).animate({"left": "0%"}, 400);
    }

    {#function is_hide() {#}
    {#    $(".alert").animate({"top": "-40%"}, 300)#}
    {# } #}
    {##}
    {#function is_show() {#}
    {#    $(".alert").show().animate({"top": "45%"}, 300)#}
    {# } #}
</script>


</body>
</html>